<template>
  <view class="page">
    <view class="headers">
      <view class="tab" :style="{ height: navHeight + 'px', 'padding-top': statusHeight + 'px' }">
        <view class="top-box">
          <image src="https://www.atuanjian.com/appletStatic/static/images/icon-right.png" mode="" @click="handleReturn" />
          <view class="top-flex">
            <view class="flex-item" :style="{ 'background': type == 1 ? '#D7D7D7' : 'transparent' }" @click="type = 1">个人入驻
            </view>
            <view class="flex-item" :style="{ 'background': type == 2 ? '#D7D7D7' : 'transparent' }" @click="type = 2">商家入驻
            </view>
          </view>
          <view></view>
        </view>
      </view>
    </view>
    <!-- <view class="flex-1">
      <image src="https://www.atuanjian.com/appletStatic/static/images/my/u-phone.svg" mode="" class="img"></image>
      <view class="flex-1-1">
        <view class="title">手机号</view>
        <u-input placeholder="请输入手机号" clearable maxlength="11" type='number'></u-input>
      </view>
    </view>
    <view class="flex-1">
      <image src="https://www.atuanjian.com/appletStatic/static/images/my/u-ya.svg" mode="" class="img"></image>
      <view class="flex-1-1">
        <view class="title">验证码</view>
        <u-input placeholder="请输入验证码" placeholderClass='u-input-place'>
          <template slot="suffix">
            <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
            <u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
          </template>
</u-input>
</view>
</view>
<view class="flex-1">
  <image src="https://www.atuanjian.com/appletStatic/static/images/my/u-pass.svg" mode="" class="img"></image>
  <view class="flex-1-1">
    <view class="title">请设置密码</view>
    <u-input placeholder="请输入密码" clearable type="password"></u-input>
  </view>
</view>
<view class="flex-1">
  <image src="https://www.atuanjian.com/appletStatic/static/images/my/u-pass01.svg" mode="" class="img"></image>
  <view class="flex-1-1" style="border: 0;">
    <view class="title">确认密码</view>
    <u-input placeholder="请输入密码" clearable type="password"></u-input>
  </view>
</view> -->
    <view class="tip-box" :style="{ 'marginTop': navHeight + statusHeight + 20 + 'px' }">
      <view class="tip-nav"></view>个人资料
    </view>
    <view class="flex-1">
      <view class="flex-1-1">
        <view class="title">姓名</view>
        <u-input placeholder="请输入内容" clearable v-model="form.user_name"></u-input>
      </view>
    </view>
    <view class="flex-1" @click="tapArea">
      <view class="flex-1-1">
        <view class="title">*请选择省份</view>
        <u-input placeholder="请选择省份" clearable disabled v-model="region"></u-input>
      </view>
    </view>
    <view class="flex-1">
      <view class="flex-1-1">
        <view class="title">*请填写地址</view>
        <u-input placeholder="请输入地址" clearable v-model="form.address"></u-input>
      </view>
    </view>
    <view class="flex-1">
      <view class="flex-1-1">
        <view class="title">*联系人邮箱</view>
        <u-input placeholder="请输入联系人邮箱" clearable v-model="form.email"></u-input>
      </view>
    </view>
    <view class="flex-1">
      <view class="flex-1-1" style="border: none;">
        <view class="title">*认证类别</view>
      </view>
    </view>
    <view class="flex-1">
      <view class="flex-1-1">
        <view class="ID-box-flex flex">
          <view :class="['ID-item', { active: item.checked }]" v-for="(item, index) in list" :key="item.id" @click="handleID(index)">{{ item.identity }}</view>
        </view>
      </view>
    </view>
    <view class="flex-1">
      <view class="flex-1-1" style="justify-content: space-between;align-items:flex-start;border: none;">
        <view class="title">*身份证扫描件</view>
        <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1" width="250" height="150">
          <div class="upload">
            <image src="https://www.atuanjian.com/appletStatic/static/images/my/u-card.svg" mode=""></image>正面
          </div>
        </u-upload>
        </div>
      </view>
    </view>
    <view class="flex-1">
      <view class="flex-1-1" style="justify-content: space-between;align-items:flex-start;border: none;">
        <u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple :maxCount="1" width="250" height="150">
          <div class="upload">
            <image src="https://www.atuanjian.com/appletStatic/static/images/my/u-card.svg" mode=""></image>反面
          </div>
        </u-upload>
      </view>
    </view>
    <view class="kong1"></view>
    <block v-if="type == 2">
      <view class="tip-box">
        <view class="tip-nav"></view>机构资料
      </view>
      <view class="flex-1">
        <view class="flex-1-1">
          <view class="title">*供应商名称</view>
          <u-input placeholder="请输入供应商名称" clearable v-model="form.merchants_info.merchant"></u-input>
        </view>
      </view>
      <view class="flex-1">
        <view class="flex-1-1">
          <view class="title">*法人姓名</view>
          <u-input placeholder="请输入法人姓名" clearable v-model="form.merchants_info.legal_person"></u-input>
        </view>
      </view>
      <view class="flex-1">
        <view class="flex-1-1">
          <view class="title">*法人手机号码</view>
          <u-input placeholder="请输入法人手机号" clearable v-model="form.merchants_info.legal_person_phone" maxlength="11"></u-input>
        </view>
      </view>
      <view class="flex-1">
        <view class="flex-1-1">
          <view class="title">*经营许可证</view>
          <u-input placeholder="请输入经营许可证" clearable v-model="form.merchants_info.license" maxlength="18"></u-input>
        </view>
      </view>
      <view class="flex-1">
        <view class="flex-1-1" style="border: none;">
          <view class="title">*上传营业执照和个人名片</view>
        </view>
      </view>
      <view class="kong1"></view>
      <view class="flex-1">
        <view class="flex-1-1" style="justify-content: space-between;align-items:flex-start;border: none;">
          <u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="1" width="520" height="300" class="yy">
            <div class="upload">
              <image src="https://www.atuanjian.com/appletStatic/static/dynamic/camera.png" mode=""></image>营业执照
            </div>
          </u-upload>
        </view>
      </view>
      <view class="kong1"></view>
      <view class="flex-1">
        <view class="flex-1-1" style="justify-content: space-between;align-items:flex-start;border: none;">
          <u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple :maxCount="1" width="520" height="300" class="yy">
            <div class="upload">
              <image :src="imgApi+'images/wallet/camera.png'" mode=""></image>个人名片
            </div>
          </u-upload>
        </view>
      </view>
    </block>
    <view class="tip-box" style="margin-top: 20rpx;">
      <view class="tip-nav"></view>财务信息
    </view>
    <view class="flex-1">
      <view class="flex-1-1">
        <view class="title">*开户名</view>
        <u-input placeholder="请输入开户名" clearable v-model="form.bank.account_name"></u-input>
      </view>
    </view>
    <view class="flex-1">
      <view class="flex-1-1">
        <view class="title">*开户行</view>
        <u-input placeholder="请输入开户行" clearable v-model="form.bank.bank_of_deposit"></u-input>
      </view>
    </view>
    <view class="flex-1">
      <view class="flex-1-1" style="border: none;">
        <view class="title">*银行账号</view>
        <u-input placeholder="请输入银行账号" clearable v-model="form.bank.card_number" maxlength="19"></u-input>
      </view>
    </view>
    <view class="kong"></view>
    <view class="bottom">
      <view class="tips">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" mode="" v-if='!checked' @click="checked = true" />
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" mode="" v-else @click="checked = false" />
        我已阅读并同意<span style="color: #000000;" @click.stop="handleNav('/pagesB/rich-text/index?type=' + '用户协议')">《用户协议》</span>
      </view>
      <view class="submit" @click="handleSub">提交认证</view>
    </view>
    <lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData" v-if="lotusAddressData.visible"></lotus-address>
  </view>
</template>

<script>
import lotusAddress from "../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
import { statusHeight, navHeight } from "@/utils/common.js";
import { userIdentity, userJoin } from "@/utils/request.js";
import helper from "@/utils/helper.js";
export default {
  components: {
    lotusAddress,
  },
  data() {
    return {
      imgApi:this.$config.imgApi,
      statusHeight: 0,
      navHeight: 44,
      type: 1,
      checked: false,
      tips: "",
      value: "",
      list: [],
      lotusAddressData: {
        visible: false,
        provinceName: "",
        cityName: "",
        townName: "",
      },
      form: {
        province: '',
        city: '',
        county: '',
        address: "",
        user_identity_id: [],
        bank: {
          bank_of_deposit: "",
          account_name: '',
          card_number: ''
        },
        merchants_info: {}
      },
      region: "",
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
    };
  },
  onLoad() {
    this.statusHeight = statusHeight;
    this.navHeight = navHeight;
    this.getUser()
  },
  methods: {
    handleNav(url) {
      uni.navigateTo({ url: url })
    },
    async userIdentity(data) {
      return await userIdentity(data)
    },
    async userJoin(data) {
      return await userJoin(data)
    },
    handleID(index) {
      this.list[index].checked = !this.list[index].checked
    },
    getUser() {
      this.userIdentity().then(res => {
        let list = res
        list.forEach(element => {
          element.checked = false
        });
        this.list = list
      })
    },
    tapArea() {
      this.lotusAddressData.visible = true;
    },
    choseValue(res) {
      //res数据源包括已选省市区与省市区code
      console.log(res);
      this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
      //res.isChose = 1省市区已选 res.isChose = 0;未选
      if (res.isChose) {
        this.lotusAddressData.provinceName = res.province; //省
        this.lotusAddressData.cityName = res.city; //市
        this.lotusAddressData.townName = res.town; //区
        this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
      }
    },
    handleReturn() {
      uni.navigateBack();
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    async afterRead(event) {
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this.$set(this[`fileList${event.name}`], fileListLen, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }));
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let that = this
        let a = uni.uploadFile({
          url: that.$config.upLoadApi + 'file/imageUpload',
          filePath: url,
          name: 'file',
          formData: {
            file: url,
            token: uni.getStorageSync('token'),
          },
          success: (res) => {
            var data = JSON.parse(res.data);
            uni.hideLoading()
            if (data.code == 200) {
              const result = data.path;
              resolve(result);
            } else {
              reject(new Error('上传失败')); // 拒绝 Promise
            }
          },
          fail: (err) => {
            console.error(err);
            uni.hideLoading();
            reject(err); // 拒绝 Promise
          }
        });
      })
    },
    handleSub() {
      if (!this.checked) {
        uni.showToast({
          title: '请先阅读用户协议',
          icon: 'none',
          mask: true
        })
        return;
      }
      this.form.user_identity_id = this.list
        .filter(item => item.checked)
        .map(item => item.id);
      if (!this.form.user_name || !this.lotusAddressData.provinceName || !this.form.address || !this.form.email) {
        uni.showToast({
          title: '请填写完整的个人资料！',
          icon: 'none',
          mask: true
        })
        return;
      }
      if (this.form.user_identity_id.length == 0) {
        uni.showToast({
          title: '请选择认证类别！',
          icon: 'none',
          mask: true
        })
        return;
      }
      if (!this.form.bank.bank_of_deposit || !this.form.bank.account_name || !this.form.bank.card_number || this.fileList3.length == 0 || this.fileList4.length == 0) {
        uni.showToast({
          title: '请填写完整的财务信息！',
          icon: 'none',
          mask: true
        })
        return;
      }
      if ((this.type === 2) && (!this.form.merchants_info.merchant || !this.form.merchants_info.legal_person || !this.form.merchants_info.legal_person_phone || !this.form.merchants_info.license || this.fileList3.length==0 || this.fileList4.length==0)) {
        uni.showToast({
          title: '请填写完整的机构资料！',
          icon: 'none',
          mask: true
        })
        return;
      }
      if ((this.type === 2) && !helper.validateInternationalPhoneNumber(this.form.merchants_info.legal_person_phone)) {
        uni.showToast({
          title: "手机号格式不正确！",
          icon: "none",
        });
        return;
      }
      const data = {
        ...this.form,
        token: uni.getStorageSync('token'),
        province: this.lotusAddressData.provinceName,
        city: this.lotusAddressData.cityName,
        county: this.lotusAddressData.townName,
        join_type: this.type,
        id_card_img: this.fileList1[0].url,
        id_card_negative_img: this.fileList2[0].url,
      }
      if (this.type === 2) {
        data.merchants_info.license_img = this.fileList3[0].url
        data.merchants_info.personal_business_card = this.fileList4[0].url
      }
      this.userJoin(data).then(res => {
        console.log(res)
        uni.showToast({
          title:res.msg,
          icon:'none'
        })
        setTimeout(()=>{
          uni.navigateBack()
        },1500)
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #ffffff;

  ::v-deep.u-input {
    background: transparent !important;
  }

  .ID-box-flex {
    flex-wrap: wrap;

    .ID-item {
      padding: 10rpx 28rpx;
      border-radius: 132rpx;
      font-size: 23rpx;
      color: #333333;
      background: #F2F2F2;
      margin-right: 20rpx;
      margin-bottom: 22rpx;
    }

    .active {
      background: #FFB850;
      color: #ffffff;
    }
  }

  .kong1 {
    width: 100%;
    height: 16rpx;
  }

  .bottom {
    width: 100%;
    height: 168rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0px 0px 8rpx rgba(95, 95, 95, 0.16);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;

    .submit {
      width: 665rpx;
      height: 80rpx;
      text-align: center;
      font-size: 30rpx;
      line-height: 80rpx;
      background-color: #ffb850;
      color: #ffffff;
      margin: 10rpx auto 0;
      border-radius: 12rpx;
    }
  }

  .tips {
    display: flex;
    align-items: center;
    font-size: 27rpx;
    color: #7f7f7f;
    margin: 20rpx auto 0;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 8rpx;
    }
  }

  .kong {
    width: 100%;
    height: 220rpx;
    background-color: #f2f2f2;
  }

  ::v-deep.upload {
    width: 313rpx;
    height: 180rpx;
    background-color: #ffe7ca;
    border: 1rpx solid#FFB850;
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: column;
    font-size: 28rpx;
    border-radius: 16rpx;

    image {
      margin-top: 30rpx;
      width: 104rpx;
      height: 104rpx;
    }
  }

  .title {
    font-size: 30rpx;
  }

  ::v-deep.u-upload__wrap {
    justify-content: flex-end;
  }

  ::v-deep.u-upload__wrap__preview {
    margin: 0;

    image {
      width: 313rpx !important;
      height: 180rpx !important;
    }
  }

  .tip-box {
    padding: 16rpx 0;
    background-color: #f2f2f2;
    font-size: 33rpx;
    display: flex;

    .tip-nav {
      width: 15rpx;
      height: 49rpx;
      background-color: #f59a23;
      margin: 0 12rpx 0 45rpx;
    }
  }

  .flex-1 {
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .img {
      width: 35rpx;
      height: 35rpx;
      margin-right: 16rpx;
      display: flex;
      align-items: center;
    }

    .flex-1-1 {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      flex: 1;
      border-bottom: 1rpx solid #d7d7d7;
      padding: 10rpx 0;

      ::v-deep.u-input {
        flex: 1;
        font-size: 28rpx;
        border: none;
      }

      /deep/.u-button {
        background-color: #ffb850 !important;
        border: 1rpx solid #ffb850 !important;
      }
    }
  }
}

.headers {
  width: 750rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #ffffff;

  .tab {
    padding-left: 30rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    image {
      width: 28rpx;
      height: 28rpx;
      transform: rotate(180deg);
    }
  }

  .top-box {
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top-flex {
      display: flex;

      .flex-item {
        padding: 2rpx 8rpx;
        font-size: 35rpx;
        border-radius: 8rpx;
      }
    }
  }
}
</style>